<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<title>个人中心－消息通知</title>
	</head>
	<body>
	
		<!-- self_info -->
		<div class="grzxbj">
			<div class="selfinfo center">
			<div class="lfnav fl">
				<div class="ddzx">我的商品</div>
				<div class="subddzx">
					<ul>
						<li><a href="${pageContext.request.contextPath}/toMy/sell">出售中的商品</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/tradingSuccess">已出售的商品</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/trading">交易中的商品</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/shelves">已下架的商品</a></li>
					</ul>
				</div>
				<div class="ddzx">个人中心</div>
				<div class="subddzx">
					<ul>
						<li><a href="${pageContext.request.contextPath}/toMy/my">我的资料</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/notice" style="color:#ff6700;font-weight:bold;">消息通知</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/rMessage">收到的留言</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/sMessage">发布的留言</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/criminalRecords">违规记录</a></li>
						<li><a href="${pageContext.request.contextPath}/toMy/report">举报记录</a></li>
					</ul>
				</div>
			</div>
			<div class="rtcont fr">
				<div class="grzlbt ml40">消息通知</div>
				<c:if test="${pagerModel.dates[0] != '' && pagerModel.dates[0] != null}">
					<c:forEach items="${pagerModel.dates}" var="noticeList">
						<c:if test="${noticeList.noticeStuta == '未读'}">
							<div class="subgrzl ml40 notice-bor">
								<span class="notice-title">【${noticeList.noticeTitle}】</span>
								<span class="site-demo-button notice-content" title="点击阅读">
									<input type="hidden" value="${noticeList.noticeId}">
									<a data-method="notice" class="layui-btn" href="javascript:void(0)">
										${noticeList.noticeContent}
									</a>
								</span>
								<span class="notice-time">${noticeList.noticeTime}</span>
								<span class="notice-stuta">${noticeList.noticeStuta}</span>
							</div>
						</c:if>
						<c:if test="${noticeList.noticeStuta == '已读'}">
							<div class="subgrzl ml40 notice-yidu-font notice-bor">
								<span class="notice-title">【${noticeList.noticeTitle}】</span>
								<span class="site-demo-button notice-content" title="点击阅读">
									<input type="hidden" value="${noticeList.noticeId}">
									<a data-method="notice" class="layui-btn" href="javascript:void(0)">
										${noticeList.noticeContent}
									</a>
								</span>
								<span class="notice-time">${noticeList.noticeTime}</span>
								<span class="notice-stuta">${noticeList.noticeStuta}</span>
							</div>
						</c:if>
					</c:forEach>
					<jsp:include page="../page/page.jsp">
						<jsp:param name="url" value="${pageContext.request.contextPath}/toMy/notice"/>
						<jsp:param name="items" value="${pagerModel.totalSize}"/>
						<jsp:param name="maxPageItems" value="${pagerModel.noticePageSize}"/>
					</jsp:include>
				</c:if>
				<c:if test="${pagerModel.dates[0] == '' || pagerModel.dates[0] == null}">
					<div class="null_tishi">
						<img src="${pageContext.request.contextPath}/static/image/null_tishi.gif">
						<p id="autoText">什么都没有…</p>
					</div>
				</c:if>
			</div>
			
			<!-- 显示消息模态框 -->
			<div class="modal fade" id="show-notice-modal" tabindex="-1" role="dialog">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h4 class="modal-title">标题</h4>
			      </div>
			      <div class="modal-body">
			        <p></p>
			        <span class="notice-time-span"></span>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" id="notice-close-btn" data-dismiss="modal">关闭</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- 显示消息模态框 -->
			
			<div class="clear"></div>
			</div>
		</div>
		
		<script type="text/javascript">
			$(document).ready(function(){
				
				//点击浏览消息通知
				$(".notice-content").on("click", function(){
					var noticeId = $(this).children("input[type='hidden']").val(); //获取消息id
					$("#show-notice-modal .modal-body p").html("<img src='${pageContext.request.contextPath}/static/image/loading.gif' style='margin-left:45%;'>加载中…");
					$("#show-notice-modal").modal("show");
					//ajax查询消息
					$.ajax({
						url: "${pageContext.request.contextPath}/toMy/getNoticeById",
						type: "POST",
						dataType: "JSON",
						data: {
							"noticeId": noticeId,
						},
						success: function(data){
							$("#show-notice-modal .modal-title").text(data.notice.noticeTitle);
							$("#show-notice-modal .modal-body p").text(data.notice.noticeContent);
							$("#show-notice-modal .modal-body span").text(data.notice.noticeTime);
							
						}
					});
				});
				
				//点击消息关闭按钮
				$("#notice-close-btn").on("click", function(){
					location.reload();
				});
				
				
				/*跳跳字体动画
				 *  参数详解:
				 *	upTime			上移的时间
				 *	downTime		下落的时间
				 *	beatHeight		上移高度
				 *	isAuth			是否自动
				 *	isRotate		是否旋转
				*/
				$('p#autoText').beatText({isAuth:true,beatHeight:"1.5em",isRotate:false});

			})
		</script>
		
		
	</body>
</html>